/* eslint-disable */
import React, {Component, Fragment} from 'react'
import {Button, Modal, Input, Select, Divider, Empty, List} from 'antd';
import {AudioOutlined} from '@ant-design/icons';

const {Option} = Select;
const {Search} = Input;
const onSearch = value => {
    console.log(value)
};

function onChange(value) {
    console.log(`selected ${value}`);
}

class ProjectList extends React.Component {
    constructor() {
        super();
        this.state = {
            visible: false,
            list: [],
        };
    }

    openProjectModel() {
        this.setState({
            visible: true,
        });

    }

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };


    render() {
        let inputStyle = {
            'width': '200px', 'marginLeft': '10px'
        };

        return (
            <Fragment>
                <Button type="danger" onClick={() => this.openProjectModel()}>打开模态框</Button>
                <Modal
                    width='900px'
                    title="项目选择"
                    okText="确定"
                    cancelText="取消"
                    visible={this.state.visible}
                    onCancel={this.handleCancel}
                    onOk={this.handleCancel}
                >
                    <Search placeholder="项目号" onSearch={onSearch} style={{width: 180}}/>
                    <Input placeholder="项目名称" style={{width: 180, marginLeft: 20}}/>
                    <Select defaultValue="3"
                            style={{width: 180, marginLeft: 20}}
                            placeholder="Select a person"
                            optionFilterProp="children"
                            onChange={onChange}>
                        <Option value="1">所有项目</Option>
                        <Option value="2">近三年</Option>
                        <Option value="3">当年</Option>
                        <Option value="4">去年</Option>
                        <Option value="5">前年</Option>
                    </Select>
                    <Button type="primary" style={{float: 'right'}}>查询</Button>
                    <Divider/>
                    {this.state.list.length > 0 ? <List bordered size="small" dataSource={this.state.list}
                                                        renderItem={item => (
                                                            <List.Item>
                                                                <p>{item.title}</p>
                                                            </List.Item>
                                                        )}
                    /> : <Empty/>}


                </Modal>
            </Fragment>
        )

    }


}

export default ProjectList
